<template>
	<div class="firstDiv">
	<div id="schoolInfo" class="container">
		<div>
			<PageTop></PageTop>
			<div class="navigation_bar ">
				<ul class="nav nav-tabs nav-justified">
					<li class="nav-item"><a class="nav-link" href="/#/home">首页</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/mnzy">模拟填志愿</a></li>
					<li class="nav-item"><a class="nav-link active" href="/#/schoolQuery">查学校</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/major">查专业</a></li>
					<!-- <li class="nav-item"><a class="nav-link" href="/">智能选大学</a></li> -->
					<li class="nav-item"><a class="nav-link" href="/#/echarts">高考大数据</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/chat">在线答疑</a></li>
				</ul>
			</div>
		</div>
		<div id="onepage">
			<div class="layui-card" style=" border-radius: 15px;">
				<div class="layui-card-header" style="height: 100%;">
					<div id="header-content" style="margin-left: 50px; margin-top: 25px;">
						<div class="school-name" style="font-size: 30px; font-weight: 500;color: #ffffff;">
							{{schoolInfos.schoolName}}
						</div>
						<span>
							<i class="layui-icon layui-icon-location " style="color: royalblue;"></i>
							{{schoolInfos.schoolProvince}}省{{schoolInfos.schoolCity}}市
						</span>
						<span style="margin-left: 15px;">
							<i class="layui-icon layui-icon-fire " style="color: #FF5722;"></i>
							人气值：{{schoolInfos.schoolClout}}
						</span>
					</div>


				</div>
				<div class="layui-card-body">
					<div class="row">
						<div class="col-lg-3 d-none d-lg-block" style="margin-left: 20px;">
							<el-image style="width: 60%; border-radius:10px;" :src="schoolLogo"></el-image>
						</div>
						<div class="col-5 " id="headInfo">
							<span id="tags" v-if="schoolDoTypes.length != 0">
								<el-tag type="warning" v-for="item in schoolDoTypes">{{item}}</el-tag>
							</span>
							<span id="tags" v-else>

							</span>
							<span id="tags" v-if="schoolFeatures.length != 1">
								<el-tag type="warning" v-for="item in schoolFeatures">{{item}}</el-tag>
							</span>
							<span id="tags" v-else-if="schoolFeatures.length == 1">

							</span>
							<div class="head-basic-info">
								<i class="layui-icon layui-icon-website"></i>&nbsp;学校官网：
								<span><a :href="schoolInfos.officialWeb"
										target="_blank">{{schoolInfos.officialWeb}}</a></span>
							</div>
							<div class="head-basic-info">
								<i class="el-icon-phone-outline"></i>&nbsp;官方电话：{{schoolInfos.officialTel}}
							</div>
							<div class="head-basic-info">
								<i class="layui-icon layui-icon-email"></i>&nbsp;电子邮箱：{{schoolInfos.officialEmail}}
							</div>
						</div>
						<div class="chat-robot col-3">
							
							<el-popover placement="right" title="Hi! 我是小冰" 
								:width="180" trigger="hover"  
								content="您有需要咨询的问题嘛？快来问我吧!">
								<template #reference>
									<a href="/#/chat">
										<img src="../../assets/小冰.png" style="width: 120px;" />
									</a>
								</template>
							</el-popover>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div id="twopage">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="学校概况" name="学校概况" class="schoolInfo row">
					<div class="schoolInfo-left col-lg-8 col-md-12 col-sm-12">
						<div class="school-intorduction">
							<span id="infoTitle">| 学校简介</span>
							<el-card class="introduction-box" style=" border-radius: 15px;">
								<span>
									<p style="font-family: 楷体;">&nbsp;&nbsp;{{schoolIntro[0]}}</p>
								</span>...
								<span style="color: #009F95;" @click="moreInfomation">更多></span>
							</el-card>
						</div>
						<div class="basic-info ">
							<span id="infoTitle">| 基本信息</span>
							<div class="school-rank row" style="padding: 20px;">
								<el-card class="soft-rank" style="width: 150px; height: 150px; 
									margin-top: 20px; padding: 8px; border-radius: 15px;">
									<div style="font-size: 30px; font-weight: bold; 
										text-align: center; color: #13CE66;">
									{{schoolInfos.softRank}}
									</div>
									<div style="text-align: center;margin-top: 10px;">软科排名</div> 
								</el-card> 
								<el-card class="alumni-rank" style="width: 150px; height: 150px; margin-top: 20px; 
									margin-left:35px; padding: 8px; border-radius: 15px;">
									<div style="font-size: 30px; font-weight: bold; 
										text-align: center; color: #13CE66;">
									{{schoolInfos.alumniRank}}
									</div>
									<div style="text-align: center;margin-top: 10px;">校友会排名</div> 
								</el-card>
							</div>
							
							
							<el-card class="information-box" style=" border-radius: 15px;">
								<el-descriptions border column="3">
									<el-descriptions-item label="创建时间" label-class-name="my-label" align="center">
										{{schoolInfos.foundingTime}}
									</el-descriptions-item>
									<el-descriptions-item label="占地面积(亩)" align="center">{{schoolInfos.totalArea}}
									</el-descriptions-item>
									<el-descriptions-item label="隶属于" align="center">{{schoolInfos.memberOf}}
									</el-descriptions-item>
									<el-descriptions-item label="学校地址" align="center">{{schoolInfos.schoolLoc}}
									</el-descriptions-item>
								</el-descriptions>
							</el-card>
						</div>
						<div class="characteristic-special ">
							<span id="infoTitle">| 特色专业</span>
							<el-card class="characteristic-special-box" style=" border-radius: 15px;">
								<h5>国家特色专业</h5>
								<el-link :underline="false" v-for="major in schoolNationMajors">{{major.majorName}}
								</el-link>

							</el-card>
						</div>
						<div class="school-recruitInfo ">
							<span id="infoTitle">| 招生资讯</span>
							<el-card class="recruitInfo-box" style=" border-radius: 15px;">
								<el-link :underline="false" @click="moreRecruitInfo(item.infoId,item.title)"
									v-for="item in recruitTitles">{{item.title}}
								</el-link>
							</el-card>
						</div>
						<div class="SchoolScenery ">
							<span id="infoTitle">| 校园风景</span>
							<el-carousel :interval="4000" type="card" height="300px">
								<el-carousel-item v-for="item in imagebox">
									<img :src="item" class="image">
								</el-carousel-item>
							</el-carousel>
						</div>
						<div class="SchoolMap">
							<span id="infoTitle">| 校园地图</span>
							<div class="show-map" style="margin-top: 20px;"></div>
							<SchoolMap :schoolId="schoolId"></SchoolMap>
						</div>
					</div>
					<div class="schoolInfo-right col-4 d-none d-lg-block" style="margin-top: 30px;">
						<div>
							<!-- {{imagebox[0]}} -->
							<img :src="imagebox[0]" class="image" style="width: 100%;border-radius:10px;">
						</div>


						<div class="school-recommend " style="margin-top: 30px; ">
							<span id="infoTitle">| 相近分数院校推荐</span>
							<el-card style="margin-top: 20px; border-radius: 15px;">
								<SchoolRecommend :schoolId="schoolId"></SchoolRecommend>
							</el-card>
						</div>

					</div>

				</el-tab-pane>


				<el-tab-pane label="学校介绍" name="学校介绍" class="col-8">
					<div class="schoolIntro ">
						<span id="infoTitle">| 学校介绍</span>
						<p class="schoolIntro-box" v-for="para in schoolIntro" style="font-family: 楷体;">
							&nbsp;&nbsp;&nbsp;&nbsp;
							{{para}}
						</p>
					</div>
				</el-tab-pane>
				<el-tab-pane label="开设专业" name="开设专业" class="row">
					<div class="School-special col-lg-8 col-sm-12">
						<span id="infoTitle">| 开设专业</span>
						<div>
							<el-card class="characteristic-special-box" style=" border-radius: 15px;">
								<h5>国家特色专业</h5>
								<el-link :underline="false" v-for="major in schoolNationMajors">{{major.majorName}}
								</el-link>
							</el-card>
							<el-card class="major-box" style="margin-top: 30px; border-radius: 15px;">
								<el-descriptions title="开设专业" :column="1" border>
									<el-descriptions-item label="类别" align="center">
										专业
									</el-descriptions-item>
									<el-descriptions-item v-for="major in schoolAllMajors" :label="major.majorClass">
										<el-link :underline="false" v-for="item in major.schoolMajors">
											{{item.majorName}}&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
									</el-descriptions-item>

								</el-descriptions>
							</el-card>
						</div>
					</div>
					<div class="schoolInfo-right col-4 d-none d-lg-block" style="margin-top: 10px;">
						
						<div class="school-recommend " >
							<span id="infoTitle">| 热门专业排行</span>
							<el-card style="margin-top: 20px; border-radius: 15px;">
								<MajorRecommend></MajorRecommend>
							</el-card>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="历年分数" name="历年分数" class="row">
					<div class="school-score col-lg-8 col-sm-12">
						<div class="provinceScore">
							<span id="infoTitle">| 山东省分数线</span>
							<el-select v-model="admYear" placeholder="2021" @change="getAdmScore"
								style="margin-left: 40px; width: 120px;" size="small">
								<el-option v-for="year in years" :label="year" :value="year"></el-option>
							</el-select>
							<el-table :data="admScore" border style="width: 100%">
								<el-table-column prop="admYear" label="年份">
								</el-table-column>
								<el-table-column prop="admSchoolBatch" label="录取批次">
								</el-table-column>
								<el-table-column prop="admType" label="招生类型">
								</el-table-column>
								<el-table-column prop="scoreAndRank" label="最低分/最低位次">
								</el-table-column>
								<el-table-column prop="controlLine" label="省控线">
								</el-table-column>
							</el-table>
						</div>

						<div class="majorScore" style="margin-top: 40px;">
							<span id="infoTitle">| 专业分数线</span>
							<el-select v-model="admYearX" placeholder="2021" style="margin-left: 40px; width: 120px;"
								@change="getMajorScore" size="small">
								<el-option v-for="year in years" :label="year" :value="year"></el-option>
							</el-select>
							<el-select v-model="batch" placeholder="普通类一段" style="margin-left: 40px; width: 120px;"
								size="small">
								<el-option v-for="item in batches" :label="item" :value="item"></el-option>
							</el-select>
							<el-table :data="majorScore" border style="width: 100%">
								<el-table-column prop="majorName" label="专业名称">
								</el-table-column>
								<el-table-column prop="admMajorBatch" label="录取批次">
								</el-table-column>
								<el-table-column prop="scoreAndRank" label="最低分/最低位次">
								</el-table-column>
								<el-table-column prop="courseNeed" label="选科要求">
								</el-table-column>
							</el-table>
						</div>

					</div>
					<div class="schoolInfo-right col-4 d-none d-lg-block" style="margin-top: 10px;">
						
						<div class="school-recommend " >
							<span id="infoTitle">| 相近分数院校推荐</span>
							<el-card style="margin-top: 20px; border-radius: 15px;">
								<SchoolRecommend :schoolId="schoolId"></SchoolRecommend>
							</el-card>
						</div>
					
					</div>
					
				</el-tab-pane>
				<el-tab-pane label="招生简章" name="招生简章" class="col-8">
					<div class="schoolRegular">
						<span id="infoTitle">| 招生简章</span>
						<h4 style="text-align: center; font-weight: 600;">{{recruitTitle}}</h4>
						<p class="recruitInfo-box" v-for="para in recruitInfo" style="font-family: 楷体;">
							&nbsp;&nbsp;&nbsp;&nbsp;
							{{para}}
						</p>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>
		<div id="page_bottom">
			<PageBottom></PageBottom>
		</div>
		
	</div>
	</div>
</template>

<script scoped>
	import PageTop from '../../components/basic/PageTop.vue'
	import PageBottom from '../../components/basic/PageBottom.vue'
	import SchoolRecommend from './schoolRecommend.vue'
	import MajorRecommend from '../majorInfo/majorRecommend.vue'
	import SchoolMap from './schoolMap.vue'

	export default {
		name: 'SchoolInfo',
		data() {
			return {
				schoolId: 120,
				admYear: 2021, // 省分数线年份
				admYearX: 2020, // 专业分数线年份
				years: [2020, 2019, 2018, 2017],
				schoolIntro: [], // 学校简介
				recruitTitles: [],
				recruitInfo: [], // 招生简章资讯
				recruitTitle: '',
				schoolInfos: [], // 学校基本信息
				activeName: '学校概况', // 让选项卡默认选择学校概况
				schoolLogo: '',
				schoolNationMajors: [], // 国家特色专业
				schoolAllMajors: [], // 学校开设的专业
				schoolFeatures: [],
				schoolDoTypes: [],
				admScore: [], //省分数线
				batches: [],
				batch: '普通类一段', //批次
				majorScore: [], //专业分数线
				imagebox: [],

				// 浏览器宽度
				screenWidth: 0
			}
		},
		methods: {
			init() {
				var param = this.$qs.stringify({
					schoolId: this.schoolId
				});
				// 获取学校简介
				this.getSchoolIntro();
				// 获取学校的基本信息
				this.$axios.post("/school/showSchoolById", param)
					.then(rst => {
						// console.log(rst.data);
						this.schoolInfos = rst.data;
						this.schoolLogo = this.schoolInfos.schoolLogo;
						// 分割学校的特点到一个数组里面
						this.schoolFeatures = this.schoolInfos.feature.split(",");
						this.schoolDoTypes = this.schoolInfos.doType.split(",");
						// console.log(this.schoolFeatures.length);
						// console.log(this.schoolDoTypes.length);
					}).catch(ex => {
						console.log(ex);
					});

				// 获取学校的照片
				this.$axios.post("/media/showSchoolPics", param)
					.then(rst => {
						// console.log(typeof(rst.data));
						this.imagebox = rst.data
					});
				// 获取国家特色专业
				this.$axios.post("/schoolMajor/showSchoolNationMajor", param)
					.then(rst => {
						// console.log(rst.data);
						this.schoolNationMajors = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
				// 获取招生资讯
				this.$axios.post("/recruitInfo/showTitle", param)
					.then(rst => {
						// console.log(rst.data);
						this.recruitTitles = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			handleClick(tab) {

				console.log(tab.props.label);
				if (tab.props.label == "开设专业") {
					this.getAllMajor();
				} else if (tab.props.label == "历年分数") {
					this.getAdmScore();
					this.getMajorScore();
				} else if (tab.props.label == "学校介绍") {
					this.getSchoolIntro();
				} else if (tab.props.label == "招生简章") {
					this.getSchoolRecruitInfo(1);
					this.recruitTitle = '北京工业大学2021年本科招生章程';
				}

			},
			// 查看更多 学校简介
			moreInfomation() {
				this.activeName = '学校介绍';
			},
			// 查看学校开设的专业（当选项卡选择开设专业时调用）
			getAllMajor() {
				var param = this.$qs.stringify({
					schoolId: this.schoolId
				});
				this.$axios.post("/schoolMajor/showSchoolAllMajor", param)
					.then(rst => {
						// console.log(rst.data);
						this.schoolAllMajors = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			// 查看资讯
			moreRecruitInfo(id, title) {
				this.activeName = '招生简章';
				this.recruitTitle = title;
				this.getSchoolRecruitInfo(id);
			},
			// 根据年份返回省分数线
			getAdmScore() {
				//根据年份和学校返回分数线
				var param = this.$qs.stringify({
					schoolId: this.schoolId,
					admYear: this.admYear
				});
				this.$axios.post("/admScore/searchAdmScore", param)
					.then(rst => {
						// console.log(rst.data);
						this.admScore = rst.data;
					}).catch(ex => {
						console.log(ex);
					});

			},
			getMajorScore() {
				// 根据年份获取当年的批次类型
				var paramBatch = this.$qs.stringify({
					schoolId: this.schoolId,
					admYear: this.admYearX
				});
				this.$axios.post("/schoolMajorScore/showBatch", paramBatch)
					.then(rst => {
						// console.log(rst.data);
						this.batches = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
				// 根据年份和批次返回专业分数线
				var paramMajorScore = this.$qs.stringify({
					schoolId: this.schoolId,
					admYear: this.admYearX,
					// admMajorBatch: this.batch
				});
				this.$axios.post("/schoolMajorScore/showMajorScore", paramMajorScore)
					.then(rst => {
						// console.log(rst.data);
						this.majorScore = rst.data;
					}).catch(ex => {
						console.log(ex);
					});

			},
			// 获取学校简介
			getSchoolIntro() {
				var param = this.$qs.stringify({
					schoolId: this.schoolId
				});
				this.$axios.post("/school/searchIntroBySchoolId", param)
					.then(rst => {
						// console.log(rst.data);
						this.schoolIntro = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			// 按照资讯的id查询当前选中的招生简章
			getSchoolRecruitInfo(id) {
				var param = this.$qs.stringify({
					infoId: id
				});
				this.$axios.post("/recruitInfo/showContentByInfoId", param)
					.then(rst => {
						console.log(rst.data);
						this.recruitInfo = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			setSize: function() {
				// 通过浏览器宽度(图片宽度)计算高度
				this.bannerHeight = 400 / 1920 * this.screenWidth;
			},
		},
		created() {
			// 从school页面获取学校id
			const routerParams = this.$route.query.id;
			this.schoolId = routerParams
			this.init();
		},
		components: {
			PageTop,
			PageBottom,
			SchoolRecommend,
			MajorRecommend,
			SchoolMap
		},
		mounted() {
			layui.use('element', function() {
				var element = layui.element;

			});
			// 首次加载时,需要调用一次
			this.screenWidth = window.innerWidth;
			this.setSize();
			// 窗口大小发生改变时,调用一次
			window.onresize = () => {
				this.screenWidth = window.innerWidth;
				this.setSize();
			}
		}
	}
</script>

<style >
	.firstDiv{
		background-image: url(../../assets/backimg5.png);
	}
	.navigation_bar {
		margin-top: 30px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: 560;
	}

	#schoolInfo #onepage {
		margin-top: 40px;
	}

	.layui-card-header span {
		color: white;
	}

	.head-basic-info {
		font-size: 15px;
		color: #696969;
		margin-top: 10px;
		margin-left: 10px;
	}

	#schoolInfo .el-link {
		font-size: 17px;

	}

	#headInfo .el-tag {
		margin: 10px;
	}

	#schoolInfo .el-tabs__item {
		font-size: 18px !important;
		width: 200px !important;
		height: 40px !important;
		text-align: center;
	}

	.el-link {

		font-size: 17px;
	}

	#onepage .layui-card {
		background: -webkit-linear-gradient(bottom, white, #90EE90, #67C23A) no-repeat;
	}


	.el-tabs__item {
		font-size: 26px !important;

	}

	/* span标题 */
	#infoTitle {
		font-size: 20px;
		font-weight: 500;
	}

	.introduction-box {
		margin-top: 20px;
		/* width: 100%; */
	}

	.basic-info {
		margin-top: 30px;
		margin: 20px 0 35px;
		*overflow: hidden;
		clear: both;
	}

	.basic-info .information-box {
		margin-top: 20px;
		width: 100%;
	}


	.characteristic-special {
		margin-top: 40px;
	}

	.characteristic-special-box {
		margin-top: 20px;
	}

	.characteristic-special-box h5 {
		color: #67C23A;
		margin-left: 15px;
	}

	.school-recruitInfo {
		margin-top: 40px;
	}

	.recruitInfo-box {
		margin-top: 20px;
		padding: 10px;
	}

	.el-link {
		margin-top: 20px;
		margin-left: 15px;
	}

	.el-table {
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 20px;
	}

	.SchoolScenery {
		margin-top: 40px;
	}

	.el-carousel {
		margin-top: 20px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.SchoolScenery img {
		/*设置图片宽度和浏览器宽度一致*/
		width: 100%;
		height: inherit;
	}

	.schoolIntro {
		margin-top: 20px;
	}

	.schoolIntro-box {
		margin-top: 20px;
	}

	.recruitInfo-box {
		margin-top: 20px;
	}

	.schoolRegular {
		margin-top: 20px;
	}

	.schoolRegular-box {
		margin-top: 20px;
	}
	#page_bottom{
		margin-top: 50px;
	}
</style>
